<template>
  <div class="common-login">
    <el-form-item label="勇士名" prop="username">
      <el-input
        class="ps"
        type="text"
        v-model="loginForm.username"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        type="passwor"
        v-model="loginForm.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="captcha">
      <el-input
        v-model="loginForm.captcha"
        type="text"
        maxlength="5"
        class="captcha"
        @keydown.native.13="enterK('loginForm')"
      ></el-input>
      <span class="captcha-svg" v-loading="showCap">
        <i v-html="captcha" @click="getCapcha"></i>
      </span>
    </el-form-item>
    <el-form-item class="btn_father">
      <el-button type="primary" @click="login('loginForm')" class="btnClass"
        >登录</el-button
      >
    </el-form-item>
    <!-- 手机登入图标 -->
    <el-form-item>
      <svg class="icon">
        <use xlink:href="#icon-iphone"></use>
      </svg>
      <a
        href="#"
        @click="$emit('changprom')"
        style="color: #fff; font-size: 16px"
        >短信登入</a
      >
    </el-form-item>
  </div>
</template>

<script>
//引入你定义的js
import * as api from "@/api/user.js";
//常规登入
//表单验证 监听loginFrom变化 同步到父组件的loginFrom
export default {
  //接受loginForm
  //无效代码
  //  props:["loginForm"],
  data() {
    return {
      //实现子组件和父组件进行联动
      //通过watch来监听login的变化
      loginForm: {
        username: "lbw",
        password: "555",
        captcha: "",
      },
      captcha: "", //验证码
      //控制你得遮罩
      showCap: false,
    };
  },
  //获取请求
  mounted() {
    this.getCapcha();
  },
  //定义watch监听loginFrom的变化
  watch: {
    //监听的是对象所以要深度监听
    loginForm: {
      handler(newVal) {
        //监听到loginForm的变化就调用自定义函数
        this.$emit("syncLoginForm", newVal);
      },
      deep: true,
    },
  },
  methods: {
    //登入函数
    enterK(t){
      this.login(t);
    },
    login(formName) {
      this.$emit("submit", formName);
    },
    //封装获取验证码的方法
    getCapcha() {
      this.showCap = true;
      api.getCaptcha().then((res) => {
        this.captcha = res.data.img;
        this.showCap = false;
      });
    },
  },
};
</script>

<style scoped lang="less">
.common-login {
  margin: auto;
}
.captcha {
  width: 150px;
  vertical-align: top;
  /deep/.el-input__inner {
    width: 100%;
    height: 45px;
    border-radius: 5px 0 0 5px;
    border: 0;
    font-size: 18px;
  }
}
.captcha-svg {
  background: #fff;
  display: inline-block;
  height: 45px;
  width: 150px;
  text-align: center;
  cursor: pointer;
  border: 0;
  border-radius: 0 5px 5px 0;
}
</style>
